<template>
	<view class="my-container">
		<view class="header">
			<image :src="userInfo.avatar"></image>
			<text class="nickname">{{userInfo.nickname}}</text>
		</view>
		<van-cell title="会员中心" is-link />
		<van-cell title="我的订单" is-link />
		<van-cell title="收获地址" is-link />
		<van-cell title="我的足迹" is-link />
		<van-cell title="我的收藏" is-link />
		<van-cell title="意见反馈" is-link />
		<view class="footer">
			<van-button type="primary" block round @click="logout">退出</van-button>
		</view>
		<my-dialog v-model="show" title="提示" message="确认退出吗?" @onClose="close"></my-dialog>
	</view>
</template>

<script setup lang="ts">
	import { getUserInfo } from '../../api/user'
	import { ref } from 'vue'
	import { useTotalCount, useCheckRight, useTabBarItemText } from '../../hooks'
	import { useUserStore } from '../../stores/user'
	import { User } from '../../types/user';
	useTotalCount()
	useCheckRight()
	useTabBarItemText()

	const store = useUserStore()

	const userInfo = ref({} as User)
	const show = ref(false)

	const getUserInfoData = async () => {
		const res = await getUserInfo()

		userInfo.value = res.data
	}

	getUserInfoData()

	const logout = () => {
		show.value = true
	}

	const close = (value : 'cancel' | 'sure') => {
		// 这种自己关闭，适合Dialog
		// show.value = false
		if (value === 'sure') {
			// 设置下tabBarItem的文字
			uni.setTabBarItem({
				index: 3,
				text: '我的'
			})

			// 清空token
			store.setToken('')

			// 跳转到登录页面
			uni.redirectTo({
				url: '/subpkg/login/login'
			})
		}
	}
</script>

<style lang="scss" scoped>
	.my-container {
		.header {
			width: 100%;
			height: 250px;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #c82519;
			flex-direction: column;

			image {
				width: 200rpx;
				height: 200rpx;
				border-radius: 50%;
			}

			.nickname {
				margin-top: 20px;
				color: white;
				font-size: 18px;
			}
		}

		.footer {
			padding: 20rpx;
		}
	}
</style>